<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-2-2-导航栏的使用</title>
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">
	body{
		margin:10px 0;
	}
</style>
</head>
<body>
	
	<div class="container">

		
		<div class="media">
			<!-- 媒体对象左边，垂直居中 -->
			<a href="#" class="media-left media-bottom">
				<img src="images/logo.png" >
			</a>

			<div class="media-body">
				<h4 class="media-heading">欢迎来到XX学院</h4>
				<p>welcome to school <small>垂直居中图片</small></p>
			</div>
		</div>



		<br>
		<h2>可模仿评论之类的页面</h2>
		<div class="media">
	
			<div class="media-body">
				<h4 class="media-heading">欢迎来到XX学院</h4>
				<p>welcome to school</p>
			</div>
			<a href="#" class="media-right">
				<img src="images/logo.png" >
			</a>

		</div>

<br>
		
		
		<div class="media" style="border: 1px solid red;">
			<h2>可模仿评论之类的页面</h2>
			<a href="#" class="media-left">
				<img src="images/logo.png" >
			</a>

			<div class="media-body">
				<h4 class="media-heading">
					欢迎来到XX学院
				</h4>
				<p>
					welcome to school
				</p>

				<span class="help">可以把媒体对象包含在媒体对象的body内嵌套使用</span>
						<div class="media">
							<a href="#" class="media-left">
								<img src="images/logo.png" >
							</a>

							<div class="media-body">
								<h4 class="media-heading">欢迎来到XX学院</h4>
								<p>welcome to school</p>
							</div>
						</div>
			</div>
		</div>
	</div>



<hr>
	<div class="container">
		<ul class="media-list">
			<li class="media">
				<a href="#" class="media-left">
					<img src="images/logo.png" alt="">
				</a>
				<div class="media-body">
					<h4>欢迎来到极客学院</h4>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
				</div>
			</li>

			<li class="media">
				<a href="#" class="media-left">
					<img src="images/logo.png" alt="">
				</a>
				<div class="media-body">
					<h4>欢迎来到极客学院</h4>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
				</div>
			</li>

			<li class="media">
				<a href="#" class="media-left">
					<img src="images/logo.png" alt="">
				</a>
				<div class="media-body">
					<h4>欢迎来到极客学院</h4>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
					<p>这里是bootstrap教程</p>
				</d

		</ul>
	</div>











<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
	$("#mytab").click(function(e){
		e.preventDefault()
		$(this).tab("show")
	})




</script>

</body>
</html>